<template>
  <div>
    <el-dialog  class="dia-style" :title="title" :visible.sync="isOpen" width="60%" append-to-body>
      <div class="height:500px;">
        <el-row>
          <el-col :span="24">
            <div class="tips">基础信息</div>
          </el-col>
        </el-row>

        <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="数据源名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入数据源名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="协议类型" prop="type">
                <el-select v-model="formData.dataScope">
                  <el-option
                    v-for="item in dataScopeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="tips">其他信息</div>
            </el-col>

            <el-col :span="12">
              <el-form-item label="索引服务IP" prop="sendIP">
                <el-input v-model="formData.sendIP" placeholder="请输入索引服务IP"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="索引服务端口" prop="serveIP">
                <el-input v-model="formData.serveIP" placeholder="请输入索引服务端口"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="索引用户名" prop="port">
                <el-input v-model="formData.port" placeholder="请输入索引用户名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="索引密码" prop="esParssword">
                <el-input show-password v-model="formData.esParssword" placeholder="请输入索引密码"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="索引名称" prop="indexName">
                <el-input v-model="formData.indexName" placeholder="请输入索引名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="元数据" prop="ydata">
                <el-select v-model="formData.ydata" style="width:100%">
                  <el-option
                    v-for="item in yuanData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
    <EditDialog ref="addRef" title="新增"></EditDialog>
    <SelectDialog ref="selectRef" title="选择接入数据"></SelectDialog>
  </div>
</template>

<script>
//  模拟数据
import prodocutType from '@/views/accessProduct/mockData/prodtctType.json'
import EditDialog from '@/components/accessProduct/EditProduct'
import SelectDialog from '@/components/accessProduct/gatherData/SelectDialog'

export default {
  name: 'editProduct',
  components: { EditDialog, SelectDialog },
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    open: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      isOpen: this.open,
      showAddDialog: false,
      showSelectDialog: false,
      options: prodocutType,
      importProduct: [{
        name: '华为防火墙',
        prodcutName: '防火墙',
        companyName: '华为',
        versionName: 'V1.0'
      }],
      dataScopeOptions: [{
        label: 'http',
        value: 'http'
      },
        {
          label: 'https',
          value: 'https'
        }],
      yuanData: [
        {
          label: '检测器流量数据标准',
          value: '1'
        },
        {
          label: '行为树数据标准',
          value: '2'
        },
        {
          label: '日志数据标准',
          value: '3'
        }

      ],
      // 表单参数
      rules: {
        name: [
          { required: true, message: '数据源名称不能为空', trigger: 'blur' }
        ],
        way: [
          { required: true, message: '请选择解码方式', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    open: {
      handler(newValue) {
        this.isOpen = newValue
      }
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.formData.roleId != undefined) {
            this.$modal.msgSuccess('修改成功')
            this.isOpen = false
            this.$emit('changeOpen', false)
          } else {
            this.$modal.msgSuccess('新增成功')
            this.isOpen = false
            this.$emit('changeOpen', false)
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const name = row.name
      this.$modal.confirm('是否确认删除角色编号为"' + name + '"的数据项？').then(function() {
        return true
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    handleAddProduct() {
      this.$refs.addRef.isOpen = true
    },
    /**  点击 ‘请选择’ **/
    handleSelectData() {
      this.$refs.selectRef.isOpen = true
    },
    /**  关闭弹窗 **/
    handleSelectOpen(value) {
      this.showSelectDialog = value
    }
  }
}
</script>

<style lang="scss" scoped>

.el-cascader {
  width: 100%;
}

.dialog-footer {
  width: 100% !important;
  display: block !important;
}

.el-form-item__label {
  width: 140px !important;
}

.el-form-item__content {
  margin-left: 140px !important;
}
</style>
